<template>
    <n-popconfirm v-model:show="showPopconfirm" :setShow="handleSetShow">
        <template #icon>
            <n-icon size="16">
                <InfoOutlined />
            </n-icon>
        </template>
        <template #action>
            <n-space style="margin-right: 0.375rem; flex: 1" justify="flex-end">
                <n-button size="tiny" @click="handleCancel">取消</n-button>
                <n-button @click="handleExecuteService('restart')" type="primary" size="tiny">
                    确认
                </n-button>
            </n-space>
        </template>
        <template #trigger>
            <n-popover trigger="hover">
                <template #trigger>
                    <n-button class="main-framework-header-func_button"  quaternary circle>
                        <template #icon>
                            <n-icon size="20px">
                                <PowerSettingsNewRound />
                            </n-icon>
                        </template>
                    </n-button>
                </template>
                <span>重启服务</span>
            </n-popover>
        </template>
        <template #default>确认重启服务？</template>
    </n-popconfirm>
</template>

<script setup lang="ts">
import axiosInstance from '@/utils/network/axios'
import { PowerSettingsNewRound, InfoOutlined } from '@vicons/material'
import { useMessage } from 'naive-ui'
import { ref } from 'vue'

const message = useMessage()
const showPopconfirm = ref(false)

function handleSetShow(event: boolean) {
    console.log(event)
}

function handleCancel() {
    showPopconfirm.value = false
}

async function handleExecuteService(action: 'start' | 'stop' | 'restart' | 'switch_enable') {
    axiosInstance.put(`/home/service-control?name=vsftpd`, { action: action }).then((response) => {
        message.success('操作成功')
        showPopconfirm.value = false // 操作成功后也关闭弹窗
    })
}
</script>

<style lang="scss" scoped>
.main-framework-header-func_button:hover {
    background-color: #f0f0f070;
    color: orange;
}

:deep(.n-popconfirm__icon) {
    margin-right: 0 !important;
}
</style>
